// 车险计费明细
<template>

<div class="car-charging-detatild">

    <div class="car-chargin-header">

        <div class="charging-company">
            <c-company-icon :company='chargingData.company'></c-company-icon>
        </div>

        <div class="chargin-val">

            <div class="total">
                合计: {{chargingData.total}} ￥
            </div>
            
            <div class="tax">
                车船税: {{chargingData.tax}} ￥
            </div>

        </div>
        
    </div>
    
    <div class="car-charging-detailed">
        <Row>
            <Col  class="car-charging-item" v-for='(mod, index) of tableConf' :key='index' :span='mod.span'>
                <div>
                    
                    <c-block-header :title='mod.title'></c-block-header>
                    <Table :data='mod.data' :columns='mod.columns' ></Table>
                </div>
            </Col>
        </Row>
    </div>
    
</div>

</template>

<script lang='ts'>
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import { isEmptyObj } from  '@/utils/tools'

@Component({})
export default class carChargingDetailed extends Vue{
    name:string = 'car-charging-detailed'

    @Prop()
    chargingData
    
    @Prop()
    hasKeys

    get tableConf(){
        
        return [

            {
                title: '商业险费用',
                span: 24,
                data: this.syChargingData,
                columns: this.detailidTitle,
            },

            {
                title: '交强险费用',
                span: 24,
                data: this.jqChargingData,
                columns: this.detailidTitle,
            }
            
        ]
    }

    // 交强数据只有一条
    get jqChargingData(){
        return  this.chargingData['jqCharging']
    }

    // 商险列表
    get syChargingData(){
        let cache = [];
        let chargingData = this.chargingData;
        
        if(chargingData && !isEmptyObj(chargingData)){

             this.chargingData.syCharging.forEach(item =>{

                this.hasKeys.syTotal = true;
                
                if(this.hasKeys[item.key]){
                    cache.push(item)
                }
                
            })

        }
       

        return cache
        
    }

    // 表格配置
    detailidTitle = [

        {
            title: '类型',
            key: 'label'
        },
        {
            title: '投保(元)',
            key: 'description',
        },
        {
            title: '标准保费(元)',
            key: 'orginnal',
            render (h, {row ,column, index}){
                return h(
                    'span', 
                    {
                        style: {
                            color: '#a0adc9',
                        },
                    },
                    [row.orginnal]   
                )
            }  
        },
        {
            title: '折扣(%)',
            key: 'discount',
            render (h, {row ,column, index}){
                return h(
                    'span', 
                    {
                        style: {
                            color: '#19be6b',
                        },
                    },
                    [(row.discount + '%')]   
                )
            }  
        },
        {
            title: '折后保费(元)',
            key: 'discounted',
            render (h, {row ,column, index}){
                return h(
                    'span', 
                    {
                        style: {
                            color: '#ff5959',
                        },
                    },
                    [row.discounted]   
                )
            }   
        }
        
        
    ]
    
}


</script>

<style  lang='scss'>

.car-charging-detatild{

    // 修改iview表格样式
    .ivu-table-row-highlight div.ivu-table-cell{
        color: $font_light_color;
    }

    div.ivu-table::after{
        content: '';
        display: none;
    }

    .ivu-table-wrapper,
    .table,
    .tbody,
    .object{
        border: none;
    }
    
     div.ivu-table::after{
        content: '';
        display: none;
    }
    
}

.car-chargin-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-bottom: _rem(40px);
    padding: _rem(10px) _rem(6px);
    border-radius: $border_radius;
    box-shadow: $default_shadow;
    background: $default_bg;

    .charging-company,
    .chargin-val{
        flex: 1 1;
    }
    
    .total,
    .tax{
        float: right;
        margin-left: _rem(20px);
        text-align: right;
        font-size: $font_md;
    }

    .tax{
        color: $font_secondary;
    }
    .total{
        font-weight: 600;
        color: $danger_color;
    }
    
}

</style>